import React, { useState } from 'react'
import { Button, StyleSheet, Text, View } from 'react-native'

export default function TsDemo() {

  // 1. 指定返回类型
  const click: () => void = () => {
    // console.log(add(1,2));
    // console.log(concat('this is' ,'str'));
    console.log(determine(true));



  }
  // 2. number类型 
  const add = (num1: number, num2: number) => {
    return num1 + num2
  }

  // 3. string类型
  const concat = (a: string, b: string) => {
    return ` ${a},${b}`
  }


  // 4. boolean
  const determine = (isShow: boolean) => {
    setShow(!show)
    return isShow ? 'this is true' : ' this is false'
  }
  const [show, setShow] = useState(false)


  // 5. 数组类型
  const array: string[] = ['ts', 'ning', 'rk', 'jkl', 'bl']
  const array2: Array<number> = [1, 2, 3, 4]


  // 6. 元组类型
  const t1: [string, number, boolean] = ['张三', 12, true];
  console.log(t1);
  t1.push(100);
  console.log(t1);

  // 7. 枚举类型
  enum Job {
    Teacher = 100,
    Programmer = 200,
    Cook = 300,
  }
  console.log(Job.Programmer);
  enum City {
    NanJing = '南京',
    WuXi = '无锡',
    HangZhou = '杭州',
  }
  console.log(City.NanJing);


  // 8. 联合类型
  let arg: number | string = '1';
  arg = 12;
  // arg = false; // 不能赋值给布尔值
  const name: string | undefined | null = null;
  type user = {
    name?: string;
    age?: number;
    speak?: () => void;
  }
  const u: user | undefined = {};
  u?.speak?.();

  // 类型文件和命名空间
  // const student: Student = {
  //   name: '张三',
  //   age: 12,
  //   hobby: ['唱歌', '跳舞', '打篮球'],
  // } as Student;
  // console.log(student);

  // const dog: Info.Dog = {
  //   name: '大黄',
  //   age: 12,
  //   weight: 20,
  // } as Info.Dog;
  // console.log(dog);





  return (
    <View>
      <Button
        title='click me'
        onPress={click}
      />
      <Text> {show ? 'this is text' : 'i am text'} </Text>
      {
        array.map(item => {
          return (
            <View key={item} style={styles.TxtView} >
              <Text style={styles.txt}>{item} </Text>
            </View>
          )
        })
      }
    </View>
  )
}
const styles = StyleSheet.create({
  TxtView: {
    width: 100,
    backgroundColor: '#2a9949',
    borderRadius: 4,
    height: 24,
    marginVertical: 4,
    color: '#fff'
  },
  txt: {
    color: '#fff',
    textAlign: 'center',
    lineHeight: 20,
  }
})